<template>
  <drawer-panel v-model="dialogVisible" title="编辑站点">
    <form-panel :ok-click="submitForm">
      <el-form ref="elForm" :model="queryObj" :rules="rules" size="medium" label-width="165px" label-suffix="：">
        <el-col :span="elColSpan">
          <el-form-item label="水库名称" prop="field101">
            <el-input v-model="queryObj.field101" placeholder="请输入水库名称" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="elColSpan">
          <el-form-item label="主坝建筑物级别" prop="field102">
            <el-input
              v-model="queryObj.field102"
              placeholder="请输入主坝建筑物级别"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="elColSpan">
          <el-form-item label="水库规模" prop="field103">
            <el-input v-model="queryObj.field103" placeholder="请输入水库规模" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="elColSpan">
          <el-form-item label="坝高" prop="field104">
            <el-input v-model="queryObj.field104" placeholder="请输入坝高" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="elColSpan">
          <el-form-item label="库容" prop="field105">
            <el-input v-model="queryObj.field105" placeholder="请输入库容" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="elColSpan">
          <el-form-item label="正常蓄水位" prop="field106">
            <el-input v-model="queryObj.field106" placeholder="请输入正常蓄水位" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="elColSpan">
          <el-form-item label="坝型" prop="field107">
            <el-input v-model="queryObj.field107" placeholder="请输入坝型" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="elColSpan">
          <el-form-item label="监管属性" prop="field108">
            <el-input v-model="queryObj.field108" placeholder="请输入监管属性" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="elColSpan">
          <el-form-item label="坝龄" prop="field109">
            <el-input v-model="queryObj.field109" placeholder="请输入坝龄" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="elColSpan">
          <el-form-item label="注册登记" prop="field110">
            <el-input v-model="queryObj.field110" placeholder="请输入注册登记" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="elColSpan">
          <el-form-item label="安全鉴定" prop="field111">
            <el-input v-model="queryObj.field111" placeholder="请输入安全鉴定" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="elColSpan">
          <el-form-item label="建成时间" prop="field112">
            <el-date-picker
              v-model="queryObj.field112"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请输入建成时间"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form>
    </form-panel>
  </drawer-panel>
</template>

<script>
export default {
  name: 'IndexInput',
  data() {
    return {
      dialogVisible: false,
      elColSpan: 24,
      queryObj: {
        field101: undefined,
        field102: undefined,
        field103: undefined,
        field104: undefined,
        field105: undefined,
        field106: undefined,
        field107: undefined,
        field108: undefined,
        field109: undefined,
        field110: undefined,
        field111: undefined,
        field112: undefined
      },
      rules: {
        field101: [
          {
            required: true,
            message: '请输入水库名称',
            trigger: 'blur'
          }
        ],
        field102: [
          {
            required: true,
            message: '请输入主坝建筑物级别',
            trigger: 'blur'
          }
        ],
        field103: [
          {
            required: true,
            message: '请输入水库规模',
            trigger: 'blur'
          }
        ],
        field104: [
          {
            required: true,
            message: '请输入坝高',
            trigger: 'blur'
          }
        ],
        field105: [
          {
            required: true,
            message: '请输入库容',
            trigger: 'blur'
          }
        ],
        field106: [
          {
            required: true,
            message: '请输入正常蓄水位',
            trigger: 'blur'
          }
        ],
        field107: [
          {
            required: true,
            message: '请输入坝型',
            trigger: 'blur'
          }
        ],
        field108: [
          {
            required: true,
            message: '请输入监管属性',
            trigger: 'blur'
          }
        ],
        field109: [
          {
            required: true,
            message: '请输入坝龄',
            trigger: 'blur'
          }
        ],
        field110: [
          {
            required: true,
            message: '请输入注册登记',
            trigger: 'blur'
          }
        ],
        field111: [
          {
            required: true,
            message: '请输入安全鉴定',
            trigger: 'blur'
          }
        ],
        field112: [
          {
            required: true,
            message: '请输入建成时间',
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    open(record) {
      this.dialogVisible = true
      if (record) {
        this.queryObj = record
      }
    },
    submitForm() {
      this.$refs.elForm.validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs.elForm.resetFields()
    }
  }
}
</script>

<style scoped></style>
